<template>
  <q-item class="comment-box no-padding-x">
    <q-item-section>
      <div class="row items-center size-14">
        <div class="col row items-center">
          <a-head :user="comment.user" :slogan="$q.screen.gt.md"></a-head>
        </div>
        <div>
          <div class="size-14 text-grey-6">{{ timesince(comment.add_date) }}</div>
        </div>
      </div>
      <div class="size-16 q-my-md full-width">
        <blockquote v-if="comment.parent" class="full-width text-grey-8 bg-grey-2 q-pa-md q-mb-md">
          <div v-if="!parentCollapsible" class="ellipsis size-16">{{ htmlToText(comment.parent.content) }}</div>
          <div v-if="parentCollapsible" class="size-16 img-center" v-html="getSanitizeHtml(comment.parent.content)">
          </div>
          <div class="row items-center">
            <div class="col">
              <small>{{ comment.parent.user.username }} {{ timesince(comment.parent.add_date) }}</small>
            </div>
            <div>
              <q-btn flat dense @click="parentCollapsible = !parentCollapsible"
                     :icon="parentCollapsible ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"/>
            </div>
          </div>
        </blockquote>
        <a-map-viewer v-if="map && comment.lat !== null && comment.lng !== null"
                      :key="comment.id"
                      :map="map"
                      height="30vh"
                      static-map
                      class="q-mb-md"
                      :comment="comment"></a-map-viewer>
        <div class="text-content" v-html="getSanitizeHtml(comment.content)">
        </div>
      </div>
      <a-text-input v-if="replyInput" autofocus :loading="comment.loading" title="回复" @close="replyInput = false"
                    @submit="onSubmit"></a-text-input>
      <div v-else class="row items-center">
        <div class="col row items-center">
          <q-btn :color="comment.up ? 'primary' :  'grey-6'" dense flat class="q-mr-sm" @click="upComment(comment.id)">
            <div class="row items-center">
              <q-icon name="thumb_up" class="size-18"/>
            </div>
            <span v-if="(comment.up_number || up !== null) && up !== 0" class="q-ml-xs">{{ up !== null ? up : comment.up_number }}</span>
          </q-btn>
          <q-btn v-if="auth" color="grey-6" dense flat @click="replyInput = true">
            <div class="row items-center">
              <q-icon name="reply" class="size-18"/>
            </div>
          </q-btn>
          <!--<div v-if="index" class="size-14 text-grey-6 q-mr-md">{{ index }}楼</div>-->
        </div>
        <div>
        </div>
      </div>
    </q-item-section>
  </q-item>
</template>

<script>
  import { sanitizeHtml } from '../utils/string'
  // import AMapViewer from '../components/map/MapViewer'

  export default {
    name: 'aCommentBox',
    components: {
      AMapViewer: function (resolve) {
        require(['../components/map/MapViewer'], resolve)
      }
    },
    props: {
      comment: {
        type: Object,
        required: true
      },
      map: {
        type: Object,
        required: false
      },
      index: {
        type: Number,
        required: false
      }
    },
    data () {
      return {
        replyInput: false,
        reply: '',
        up: null,
        parentCollapsible: false
      }
    },
    created () {
      this.$root.$on('toggleReplyInput', this.onReplyInputOpened)
    },
    watch: {
      replyInput (boolean) {
        if (boolean) {
          this.$root.$emit('toggleReplyInput', this.index)
        }
      }
    },
    methods: {
      onReplyInputOpened (index) {
        if (index !== this.index) {
          this.replyInput = false
        }
      },
      onSubmit (content) {
        this.$emit('reply', { content, parentId: this.comment.id })
      },
      async upComment (id) {
        if (!this.auth) {
          this.$router.push('/login')
        }

        const { status, data } = await this.postRequest({
          api: '/api/comment/{id}/up/',
          id
        })

        if (status === 200) {
          this.up = data.up_number
        } else {
          this.notify('error', '点赞发生错误，请稍后重试')
        }
      },
      getSanitizeHtml (html) {
        return sanitizeHtml(html, ['img', 'i', 'p', 'blockquote', 'a', 'h2', 'ul', 'ol'])
      },
      htmlToText (html) {
        let text = html.replace(/<\/?.+?>/g, '')
        text = text.replace(/ /g, '')
        return text
      }
    }
  }
</script>

<style lang="stylus">
  @import "~quasar/dist/quasar.styl"
  .comment-box
    p
      margin 0 0 8px 0
    blockquote
      border-left 3px solid $primary
</style>
